<template>
  <view class="box public-font" :style="colorStyle">
<!--    <view class="card" style="padding: 50upx;color: #fff;position: relative;">-->
<!--      <view style="font-size: 28upx;margin-bottom: 6upx;">-->
<!--        {{ moneyArr.unpaid_amount == 0 ? '恭喜您': '待付租金' }}-->
<!--      </view>-->
<!--      <view style="font-size: 50upx;margin-bottom: 20upx;">-->
<!--        {{ moneyArr.unpaid_amount == 0 ? '已还完' : moneyArr.unpaid_amount }}-->
<!--        <text style="font-size: 24upx;padding-left: 10upx;" v-if="alsoMoney != 0">元</text>-->
<!--      </view>-->
<!--      <view style="font-size: 26upx;">-->
<!--        <text>总租金{{ moneyArr.total_amount }}元，</text>-->
<!--        <text>已支付{{ moneyArr.paid_num }}期，</text>-->
<!--        <text>还剩{{ moneyArr.unpaid_num}}期</text>-->
<!--      </view>-->
<!--      <view v-if="[3,31].includes(orderItem._status._type) && orderItem.order_lease.is_buyout==1" class="mt-6" style="font-size: 26upx;">-->
<!--        <text>当前买断价{{buy_out_price}}元</text>-->
<!--      </view>-->
<!--      &lt;!&ndash; 0未支付 1支付中 2支付完 &ndash;&gt;-->
<!--      <view v-if="[3,31].includes(orderItem._status._type) && orderItem.order_lease.is_buyout==1">-->
<!--        <view class="btn1" @click="buyout()">买断</view>-->
<!--        <view class="btn2"></view>-->
<!--      </view>-->
<!--    </view>-->

    <view class="top-card">
      <view class="money-1 fs-36">
        <text  v-if="moneyArr.unpaid_amount>0">剩余租金￥{{ moneyArr.unpaid_amount }}</text>
        <text v-else>恭喜您已还完</text>
      </view>
      <view class="money-2">
        已支付{{ moneyArr.paid_num }}期，还剩{{ moneyArr.unpaid_num}}期
      </view>
      <view class="money-3" v-if="nowRent&&nowRent.dead_line">
        <view class="fs-36 mb-28">本期应还金额 (元)</view>
        <view class="fs-60 mb-28 fw-bold">{{nowRent.amount}}</view>
        <view class="text--w111-999">已出账，请在还款日前还款</view>
        <view class="day">还款到期日<uni-dateformat :date="(nowRent.dead_line) * 1000" format="yyyy-MM-dd"/></view>
      </view>
      <view class="money-3" v-else>
        <view class="fs-36 mb-28 fw-bold">已还完</view>
<!--        <view class="fs-60 mb-28 fw-bold">{{nowRent.amount}}</view>-->
<!--        <view class="text&#45;&#45;w111-999"></view>-->
<!--        <view class="day">还款到期日<uni-dateformat :date="(nowRent.dead_line) * 1000" format="yyyy-MM-dd"/></view>-->
      </view>
    </view>


    <!--      归还违约金-->
    <view v-if="moneyArr.overdue && moneyArr.overdue.status==0" class="item-box mt-20 mb-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">

      <view class="flex align-item-center justify-between" >
        <view class="mb-10">
          <text class="fw-bold">归还逾期违约金：</text>
          <text class="fw-bold text-red">{{ moneyArr.overdue.money }}元</text>
          <text @click="tipPop(moneyArr.overdue.remark)" class="ebao-iconfont ebao-wenhao-yuankuang ml-12 fs-30 text-origin"></text>
        </view>
<!--        <view class="text-red">{{moneyArr.overdue.remark}}</view>-->
        <view class="btn3" @click="overPay('return')">支付违约金</view>
      </view>
    </view>

    <view class="rent-list" v-if="list.length > 0">
      <view class="rent-item" v-for="(item,index) in list" :key="index">
        <view class="num-tip bg-gradient">第{{ item.num }}期</view>
        <view class="l">
          <view class="amount-box">
            <view class="fs-30">
              <!--    当前租金-->
              <text class="yuan">{{ item.amount }}元</text>
              <!--   优惠前租金展示-->
              <text v-if="item.before_amount && item.before_amount>item.amount">
                <text class="yuan text--w111-999 line-through ml-10">{{ item.before_amount }}元</text>
              </text>
            </view>

            <view class="status">
              <view class="status-hui" v-if="item.status == 0" >待还款</view>
              <view class="status-green" v-if="item.status == 1">已支付</view>
              <view class="status-red" v-if="item.status == 2" >已逾期</view>
              <view class="status-green" v-if="item.status == 3">已完成</view>
              <view class="status-origin" v-if="item.status == 4">已退款</view>
              <view class="status-origin" v-if="item.status == 'refunding'">退款中</view>
            </view>
          </view>
          <view class="due-day mt-10">
            到期日：<uni-dateformat :date="(item.dead_line) * 1000" format="yyyy-MM-dd"/>
          </view>
        </view>
        <view class="r">
          <template v-if="item.status == 0 || item.status == 2">
            <view class="btn-square" @click="payAlipay(id,item.num)">去支付</view>
          </template>
          <template v-if="item.overdue && item.overdue.status == 0">
            <view class="btn-square" @click="overPay('rentNum',item)">支付违约金</view>
          </template>
          <!--            验收代码：仅测试-->
<!--          <template v-if="item.status == 1">-->
<!--            <view class="btn3" @click="refundTest(item)">退款</view>-->
<!--          </template>-->
        </view>
      </view>
    </view>

<!--    旧代码：临时暂存-->
<!--    <view class="list" v-if="false">-->
<!--      <view class="item" v-for="(item,index) in list" :key="index">-->
<!--        <view class="item-box mb-24">-->
<!--          <view class="f28">第{{ item.num }}期：-->
<!--&lt;!&ndash;            原价&ndash;&gt;-->
<!--            <text class="yuan">{{ item.amount }}元</text>-->
<!--&lt;!&ndash;          优惠后&ndash;&gt;-->
<!--            <text v-if="item.before_amount && item.before_amount>item.amount">-->
<!--              <text class="yuan text&#45;&#45;w111-999 line-through ml-10">{{ item.before_amount }}元</text>-->
<!--            </text>-->
<!--          </view>-->

<!--          <view class="status-box">-->
<!--            <view class="f28" v-if="item.status == 0" style="color: #999;">待还款</view>-->
<!--            <view class="f28" v-if="item.status == 1" style="color: #19be6b;">已支付</view>-->
<!--            <view class="f28" v-if="item.status == 2" style="color: #ed4014;">已逾期</view>-->
<!--            <view class="f28" v-if="item.status == 3" style="color: #19be6b;">已完成</view>-->
<!--            <view class="f28" v-if="item.status == 4" style="color: #ff9900;">已退款</view>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view v-if="item.overdue && item.overdue.status == 0" class="item-box mb-24" >-->
<!--          <view class="f28">违约金：-->
<!--            <text class="fw-bold text-red">{{ item.overdue.money }}元</text>-->
<!--            <text @click="tipPop(item.overdue.remark)" class="ebao-iconfont ebao-wenhao-yuankuang ml-12 fs-30 text-origin"></text>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="item-box" style="margin-bottom: 0;">-->
<!--          <view class="f28">-->
<!--            到期日：<uni-dateformat :date="(item.dead_line) * 1000" format="yyyy-MM-dd"/>-->
<!--          </view>-->
<!--          <view class="f28">-->
<!--            <template v-if="item.status == 0 || item.status == 2">-->
<!--              <view class="btn3" @click="payAlipay(id,item.num)">去支付</view>-->
<!--            </template>-->
<!--            <template v-if="item.overdue && item.overdue.status == 0">-->
<!--              <view class="btn3" @click="overPay('rentNum',item)">支付违约金</view>-->
<!--            </template>-->
<!--&lt;!&ndash;            <view class="btn4" v-else>已支付</view>&ndash;&gt;-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
   <couponListWindow
		:coupon='coupon'
		@ChangCouponsClone="ChangCouponsClone"
		:openType='openType'
		:cartId='cartId'
		@ChangCoupons="ChangCoupons"
		@ruleToggle="ruleToggle"></couponListWindow> 
   <payment
       :payMode='payMode' :pay_close="pay_close"
       :totalPrice='totalPrice' :phase_type="phase_type"
       @onChangeFun='onChangeFun' :order_id="pay_order_id" :nums="nums"
   ></payment>
  </view>
</template>

<script>
import colors from '@/mixins/color';
import payment from '../components/payment';
import couponListWindow from '@/components/couponListWindow';
import { getUserInfo } from '@/api/user.js';
import {getOrderDetail, zhimaPay, getBuyoutCoupons, overPay} from '@/api/order.js';
import {getInstallmentList, createWithholdActivepay, queryWithholdActivepay, buyoutPay, buyoutMoney} from "@/api/leaseOrder";
import {leasePay} from "../../../api/leaseOrder";
import {tradeCreate} from "../../../api/order";
import zhima from '@/mixins/zhima'
export default {
  mixins: [colors,zhima],
  components: { payment, couponListWindow },
  data() {
    return {
      id: '',
      couponTitle: '请选择', //优惠券
      couponId: 0, //优惠券id
      coupon: { coupon: false, list: [], statusTile: '立即使用' }, //优惠券组件
      couponTitle: '请选择', //优惠券
			coupon_price: 0, //优惠券抵扣金额
      checkFirstCoupon:true, // 首次进入订单，默认选中第一张优惠券
      openType: 1,
      cartId: '', //购物车id
      list: [],
      moneyArr: {},
      total: 0,
      alsoMoney: 0,
      userInfo: {},
      orderItem: {},
      totalPrice: '0',
      pay_close: false,
      pay_order_id: '',
      phase_type: 2,
      nums: '',
	    check_type: 1,
      true_coupon_price: 0,
      buy_out_price: 0,
      payMode: [{
        name: "微信支付",
        icon: "icon-weixinzhifu",
        value: 'weixin',
        title: '使用微信快捷支付',
        payStatus: true,
      },
        // #ifdef H5 || APP-PLUS
        {
          name: '支付宝支付',
          icon: 'icon-zhifubao',
          value: 'alipay',
          title: '使用线上支付宝支付',
          payStatus: true
        },
        // #endif
        {
          name: "余额支付",
          icon: "icon-yuezhifu",
          value: 'yue',
          title: '当前可用余额：',
          number: 0,
          payStatus: true
        },
      ],
      aliCouponMoney:{
        installment_plan_promo_detail_info_list:[]
      }, // 支付宝优惠金额
      order_id:'',
      nowRent:{}
    };
  },
  onLoad(options) {
    this.id = options.id
    this.check_type = options.check_type
    this.order_id = options.order_id
    this.getCouponList()
    // this.getAlsoMoney()
    // this.getUserInfo()
    this.getOrderInfo()
    this.buyoutMoney()

    if(this.themeColor){
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.themeColor,
      })
    }
  },
  methods: {
    // 验收代码：仅测试
    refundTest(item){
      item.status = 'refunding'
      this.$util.Tips({ title: '请求成功' })
    },

    tipPop(tip){
      uni.showModal({
        title: '',
        content: tip,
        showCancel:false,
        confirmText:'我知道了',
        success: function (res) {
          if (res.confirm) {

          }
        }
      })
    },
    /**
		 * 获取当前金额可用优惠券
		 *
		 */
		getCouponList: function() {
      // 优惠券列表只获取一次，默认选择第一张优惠券
			let that = this;
			// let data = {
      //   lease_type:this.lease_type,
      //   pay_price:this.totalPrice, // 首期实付
			// 	cartId: this.cartId,
			// 	'new': this.news,
			// 	shipping_type: that.$util.$h.Add(that.shippingType, 1),
			// 	store_id: (that.system_store && this.deliveryType !=1) ? that.system_store.id : 0
			// };
			getBuyoutCoupons(that.id).then(res => {
				res.data.map(item=>{
					this.$set(item,'ruleshow',false);
				})
				that.$set(that.coupon, 'list', res.data);
				that.openType = 1;

        // 首次进入订单，默认选中第一张优惠券
        that.checkFirstCoupon=false
        if(that.coupon.list.length>0){
          that.ChangCoupons(0)
        }
			})
		},
    /**
			 * 处理点击优惠券后的事件
			 *
			 */
		ChangCoupons: function(index) {
			let list = this.coupon.list;
			if(list[index].is_use){
				list[index].use_title = '';
				list[index].is_use = 0;
				this.couponTitle = '请选择';
				this.couponId = 0;
			}else{
				list[index].use_title = '不使用';
				list[index].is_use = 1;
				this.couponTitle = list[index].coupon_title;
				this.couponId = list[index].id;
			}
			this.$set(this.coupon, 'coupon', false);
			this.$set(this.coupon, 'list', list);
      this.buyoutMoney();
		},
    couponTap: function() {
			this.coupon.coupon = true;
			this.coupon.list.forEach((item, index) => {
				if (item.id == this.couponId) {
					item.is_use = 1
				} else {
					item.is_use = 0
				}
			})
			this.$set(this.coupon, 'list', this.coupon.list);
		},
    ChangCouponsClone: function() {
			this.$set(this.coupon, 'coupon', false);
		},
    // 账单列表
    getInstallmentList(){
      getInstallmentList(this.id).then(res=>{
        if(res.status===200){
          this.list=res.data.list
          this.moneyArr=res.data.amount
          // 找出本期要付的钱
          this.nowRent=this.list.find(item=>{
            return item.is_top==1
          })
        }
      })
    },
    buyoutMoney(){
      buyoutMoney(this.id,{couponId:this.couponId}).then(res=>{
        if(res.status===200){
          this.buy_out_price = res.data.buyout_money
        }
      })
    },

    // 支付
    zhimaPay(num){
      uni.showLoading({ title: '支付中' })
      zhimaPay({
        oid:this.id,
        num:num
      }).then(res=>{
        uni.hideLoading()
        if(res.status===200){
          this.$util.Tips({ title: '支付成功'})
          this.getInstallmentList()
        } else {
          this.$util.Tips({
            title: res.msg,
            icon: 'error'
          });
        }
        uni.hideLoading()
      }).catch(err => {
		uni.hideLoading()
        this.$util.Tips({
          title: err,
          icon: 'error'
        });
        
      })
    },
    getAlsoMoney() {
      orderPayGetPrice({
        id: this.id, phase_type: 3
      }).then(res => {
        this.alsoMoney = res.data.price
      },() =>{ this.alsoMoney = 0 })
    },
    getUserInfo: function() {
      let that = this;
      getUserInfo().then(res => {
        that.userInfo = res.data
        // #ifdef H5 || APP-PLUS
        that.payMode[2].number = res.data.now_money;
        // #endif
        // #ifdef MP
        that.payMode[1].number = res.data.now_money;
        // #endif
        that.$set(that, 'payMode', that.payMode);
      })
    },
    getOrderInfo: function() {
      uni.showLoading({ title: "加载中" });
      getOrderDetail(this.order_id).then(res => {
        uni.hideLoading();
        this.orderItem = res.data
        // this.list = res.data.phase_pay
        // this.total = this.list.length

        //  优惠金额处理
        if(res.data.quick_order_detail && res.data.quick_order_detail.order_detail && res.data.quick_order_detail.order_detail.promo_info) {
          let order_detail = res.data.quick_order_detail.order_detail
          let installment_plan_promo_detail_info_list = order_detail.promo_info.stage_promo_detail_list[0].installment_plan_promo_detail_info_list
          this.aliCouponMoney = {
            // 优惠分期账单
            installment_plan_promo_detail_info_list: installment_plan_promo_detail_info_list
          }
        }
        this.getInstallmentList()
      })
    },
    orderPayGetPrice(type, inum){
      this.nums = inum || ''
      // orderPayGetPrice({
      //   id: this.orderItem.id,
      //   phase_type: type, nums: this.nums
      // }).then(res => {
      //   this.$set(this, 'phase_type', type);
      //   this.totalPrice = res.data.price
      //   this.pay_order_id = this.orderItem.order_id;
      //   this.pay_close = true;
      // })
    },
	zulinPay(period_num) {
		createWithholdActivepay(this.id, {period_num}).then(res => {
			console.log(res.data.tradeNo);
			uni.requestPayment({
				provider: 'alipay',
				orderInfo: res.data.tradeNo,
				complete: (e) => {
					if(e.resultCode == 9000) {
            // 查询支付结果
            this.zulinQuery(period_num)
					} else {
						this.$util.Tips({ title: '支付失败' })
					}
				}
			})
		},err => {
			this.$util.Tips({ title: err })
			// setTimeout(() => this.zulinQuery(period_num), 1500)
		})
	},
	zulinQuery(period_num) {
		queryWithholdActivepay(this.id, { period_num }).then(res => {
			this.getInstallmentList()
      this.$util.Tips({ title: "支付成功" })
		},err => this.$util.Tips({ title: err }))
	},
    /* 关闭支付组件 */
    payClose: function() {
      this.pay_close = false;
    },
    /* 支付失败回调 */
    pay_fail: function() {
      this.pay_close = false;
      this.pay_order_id = '';
    },
    /* 支付成功回调 */
    pay_complete: function() {
      this.pay_close = false;
      this.pay_order_id = '';
      that.$util.Tips({
        title: '支付成功', icon: 'success'
      }, () => {
        this.getAlsoMoney()
        this.getUserInfo()
        this.getOrderInfo()
      })
    },
    /* 事件回调 */
    onChangeFun: function(e) {
      console.log(e);
      let opt = e;
      this.getUserInfo()
      this.getAlsoMoney()
      this.getOrderInfo()
      let action = opt.action || null;
      let value = opt.value != undefined ? opt.value : null;
      (action && this[action]) && this[action](value);
    },
    // 支付：违约金
    overPay(type,item){
      let that=this
      // 每期违约金
      let lease_id = ''
      if(type=='rentNum'){
        lease_id=item.overdue.lease_id
      }
      // 归还逾期
      if(type=='return'){
        lease_id = 0
      }
      overPay( this.id,{
        lease_id:lease_id,
        paytype:'alipay',
        from:'ali_routine',
        quitUrl:'pages/goods/lease_installment/index'
      }).then(res=>{
        let status = res.data.status,
            orderId = res.data.result.order_id || '',
            tradeNo = res.data.result.trade_no || '',
            jsConfig = res.data.result.jsConfig;
        switch (status) {
          case 'ALIPAY_PAY':
            console.log('ALIPAY_PAY_MP-ALIPAY');
            if(tradeNo){
              my.tradePay({
                tradeNO: tradeNo,
                success: (e) => {
                  if (e.resultCode == 9000) {
                    that.$util.Tips({title: '支付成功'})
                  }
                },
                fail: (e) => {
                  console.log('支付失败', e)
                  that.$util.Tips({title: '支付失败'})
                },
                complete: (e) => {
                  that.getInstallmentList()
                },
              });
            }else{
              // 老订单支付：兼容旧订单
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: jsConfig.tradeNo,
                success: (e) => {
                  console.log(e)
                  if(e.resultCode=="6001"){

                  }else{
                    that.$util.Tips({ title: '支付成功' })
                  }
                },
                fail: (e) => {
                  console.log('ALIPAY_PAY_fail',e);
                  that.$util.Tips({ title: '支付失败' })
                },
                complete: () => {
                  that.getInstallmentList()
                },
              });
            }
            break;
        }
      })
    },
    // 支付结果
    payResult(){
      this.getInstallmentList()
    },
    // 支付宝支付
    // async payAlipay(num) {
    //   let that=this
    //   // todo 公域超值租验收：快捷下单主动支付前，需要创建交易组件（验收工具会监听这一步）
    //   // 1. 订单前置判断接口获取 sourceId
    //   // const { requireOrder, sceneId, sourceId } = await new Promise((resolve, reject) => {
    //   //   my.checkBeforeAddOrder({
    //   //     success: resolve,
    //   //     fail: reject
    //   //   });
    //   // });
    //   // console.log('===交易组件===>1，前置查询')
    //   //
    //   // const tradeRes = await tradeCreate({
    //   //   oid:this.id,
    //   //   source_id: sourceId,
    //   //   path:'pages/goods/lease_order_details/index'
    //   // })
    //   // console.log('===交易组件===>2，创建交易组件')
    //
    //   leasePay(this.id,{
    //     num:num,
    //     paytype:'alipay',
    //     from:'ali_routine',
    //     quitUrl:'pages/goods/lease_installment/index'
    //   }).then(res=>{
    //     let status = res.data.status,
    //         orderId = res.data.result.order_id || '',
    //         jsConfig = res.data.result.jsConfig;
    //     switch (status) {
    //       case 'ALIPAY_PAY':
    //         console.log('ALIPAY_PAY_MP-ALIPAY');
    //         uni.requestPayment({
    //           provider: 'alipay',
    //           orderInfo: jsConfig.tradeNo,
    //           success: (e) => {
    //             console.log(e)
    //             if(e.resultCode=="6001"){
    //
    //             }else{
    //               that.$util.Tips({ title: '支付成功' })
    //             }
    //           },
    //           fail: (e) => {
    //             console.log('ALIPAY_PAY_fail',e);
    //             that.$util.Tips({ title: '支付失败' })
    //           },
    //           complete: () => {
    //             that.getInstallmentList()
    //           },
    //         });
    //         break;
    //     }
    //   })
    // },

    // 买断
    buyout(){
      let that=this
      uni.showModal({
        title: `是否买断该商品，买断价为${this.buy_out_price}元`,
        success: function (res) {
          if (res.confirm) {
            buyoutPay(that.id,{
              paytype:'alipay',
              from:'ali_routine',
              quitUrl:'pages/goods/lease_installment/index',
              couponId:that.couponId,
            }).then(res=>{
              if(res.status===200){
                if(res.data.status&&res.data.status==='ALIPAY_PAY'){
                  let status = res.data.status,
                      orderId = res.data.result.order_id || '',
                      jsConfig = res.data.result.jsConfig;
                  switch (status) {
                    case 'ALIPAY_PAY':
                      console.log('ALIPAY_PAY_MP-ALIPAY');
                      uni.requestPayment({
                        provider: 'alipay',
                        orderInfo: jsConfig.tradeNo,
                        success: (e) => {
                          console.log(e)
                          if(e.resultCode=="6001"){

                          }else{
                            that.$util.Tips({ title: '支付成功' })
                          }
                        },
                        fail: (e) => {
                          console.log('ALIPAY_PAY_fail',e);
                          that.$util.Tips({ title: '支付失败' })
                        },
                        complete: () => {
                          that.getOrderInfo()
                        },
                      });
                      break;
                  }
                } else{
                  that.getOrderInfo()
                  that.$util.Tips({ title: res.msg })
                }
              }
            })
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
}
.card{
  width: 100%;
  //border-radius: 0 0 20upx 20upx;
  background-color: var(--view-theme);
  .btn1{
    top:50%;
    z-index: 2;
    right: 70upx;
    width: 100upx;
    height: 100upx;
    font-size: 24upx;
    text-align: center;
    position: absolute;
    line-height: 100upx;
    border-radius: 100upx;
    background-color: #fff;
    color: var(--view-theme);
    transform: translateY(-50%);
  }
  .btn2{
    top:50%;
    z-index: 1;
    opacity: 0.2;
    right: 50upx;
    width: 140upx;
    height: 140upx;
    font-size: 24upx;
    position: absolute;
    border-radius: 100upx;
    background-color: #fff;
    color: var(--view-theme);
    transform: translateY(-50%);
  }
}
.btn3{
  color: #fff;
  min-width: 100rpx;
  padding: 0 20rpx;
  height: 45rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 45upx;
  border-radius: 6upx;
  background:  linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%);
}
.list{
  flex: 1;
  overflow: auto;
  margin-top: 4upx;
  box-sizing: border-box;
  padding: 30rpx 30rpx 60rpx 30rpx;
  .item{
    padding: 30upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 30upx;
    &:last-child{
      margin-bottom: 0;
    }
    &-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .f28{
      font-size: 28upx;
    }
    .f26{
      font-size: 26upx;
    }
    .f24{
      font-size: 24upx;
    }
    .f20{
      color: #898989;
      font-size: 20upx;
    }
    .yuan{
      padding-left: 15upx;
      font-weight: bold;
    }
    .ok{
      color: #67C23A;
    }

    .btn4{
      width: 100upx;
      height: 45upx;
      font-size: 24upx;
      text-align: center;
      line-height: 45upx;
      border-radius: 6upx;
      color: #909399;
      background: #f4f4f5;
      border-color: #d3d4d6;
    }
  }
}
.status-box{
  >view{
    width: 100rpx;
    text-align: center;
  }
}

.top-card{
  background: linear-gradient(to bottom, var(--view-theme) 50%, #f5f5f5 100%);
  padding: 60rpx 30rpx 0;
  margin-bottom: 30rpx;
  .money-1{
    color: #fff;
    font-size: 30rpx;
    margin-bottom: 16rpx;
  }
  .money-2{
    color: #fff;
    opacity: 0.8;
  }
  .money-3{
    background: #fff;
    //height: 360rpx;
    border-radius: 20rpx;
    margin-top: 30rpx;
    padding: 50rpx 30rpx;
    position: relative;
    .day{
      position: absolute;
      right: -1rpx;
      top: 30rpx;
      background:var(--view-theme);
      opacity: 0.8;
      color: #fff;
      padding: 10rpx 20rpx;
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
      font-size: 22rpx;
    }
  }
}
.rent-list{
  flex: 1;
  overflow: auto;
  padding: 0 30rpx;
  .rent-item{
    padding: 30rpx;
    padding-top: 50rpx;
    position: relative;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .num-tip{
      position: absolute;
      top: 0;
      left: 0;
      border-top-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      width: 130rpx;
      height: 40rpx;
      line-height: 36rpx;
      text-align: center;
      font-size: 22rpx;
      color: #fff;
    }
    .amount-box{
      display: flex;
      align-items: center;
      .status{
        margin-left: 10rpx;
        font-size: 20rpx;
        font-weight: bold;
        >view{
          line-height: 1;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
        .status-green{
          background: rgba(25, 190, 107, 0.2);
          color: #19be6b;
        }
        .status-red{
          background: rgba(237, 64, 20, 0.2);
          color: #ed4014;
        }
        .status-hui{
          background: rgba(153, 153, 153, 0.2);
          color: #999;
        }
        .status-origin{
          background: rgba(255, 153, 0, 0.2);
          color: #ff9900;
        }
      }
    }
  }
}
</style>
